<!--
 * @Description: 新建场景页面左侧功能区
 * @Author: 崔堂袁
 * @Date: 2021-04-19 23:55:19
 * @LastEditTime: 2021-05-03 19:48:28
-->
<template>
  <div class="new-design-left"
       :class="{shouQiLeftStyle: !isZhankai}">
    <!-- 收起展开按钮 -->
    <button class="shouQiBtn"
            @click="shouQiClick">
      <component :is="isZhankai ? 'DoubleLeftOutlined' : 'DoubleRightOutlined'"></component>
    </button>
    <!-- 标签页 -->
    <a-tabs v-model:activeKey="activeKey"
            type="card"
            @change="change">
      <a-tab-pane key="1"
                  :tab="$t('lang.newScenePage.tools')">
        <NewDesignLeftTools @createMode="createMode"></NewDesignLeftTools>
      </a-tab-pane>
      <a-tab-pane key="2"
                  :tab="$t('lang.newScenePage.attributes')"
                  force-render>
        <NewDesignLeftAttributes></NewDesignLeftAttributes>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue'
import { ref, watch, getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import NewDesignLeftTools from './newDesignLeftTools'
import NewDesignLeftAttributes from './newDesignLeftAttributes'
export default {
  components: {
    DoubleLeftOutlined,
    DoubleRightOutlined,
    NewDesignLeftTools,
    NewDesignLeftAttributes
  },
  setup () {
    const { proxy } = getCurrentInstance()
    // ----------------点击收起展开按钮-------------
    const store = useStore()
    const isZhankai = ref(store.state.zhanKaiShouSuoControl.isZhankaiNewDesignLeft) // 左边功能区是否展开
    watch(() => store.state.zhanKaiShouSuoControl.isZhankaiNewDesignLeft, (newValue) => {
      isZhankai.value = newValue
    })
    const shouQiClick = () => {
      isZhankai.value = !isZhankai.value
    }
    // -----------------标签头部控制---------------
    const activeKey = ref('1')
    const change = () => {
      // console.log(activeKey.value)
    }
    // -----------------父子联系函数------------------
    const createMode = () => {
      toAttributes()
      proxy.$emit('createMode')
    }
    // 跳转属性
    const toAttributes = () => {
      activeKey.value = '2'
    }
    return {
      shouQiClick,
      isZhankai,
      activeKey,
      change,
      createMode,
      toAttributes
    }
  }
}
</script>

<style lang='less' scoped>
.new-design-left {
  width: 200px;
  height: calc(~"100% - 40px");
  position: relative;
  transition: 0.5s;
  border-right: 1px solid @activeColor;
  background-color: #f1f3f4;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  z-index: 1;
  /deep/.ant-tabs-nav {
    width: 100%;
    div {
      text-align: center;
      .ant-tabs-tab {
        margin: 0 10px;
        background-color: inherit;
      }
      .ant-tabs-tab-active {
        border-bottom: 2px solid @baseColor;
      }
    }
  }
  /deep/.ant-tabs-top-content {
    width: 100%;
    height: 520px;
    padding: 0 5px;
    overflow-x: hidden;
    overflow-y: auto;
    /*滚动条样式*/
    &::-webkit-scrollbar {
      width: 4px;
      /*height: 4px;*/
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
      background: @baseColor;
      &:hover {
        background-color: @fontColor;
      }
    }
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      background: rgb(196, 192, 192);
    }
  }
  .shouQiBtn {
    width: 20px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-left: 0;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    outline: none;
    background-color: @bgColor;
    cursor: pointer;
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translate(0, -50%);
    &:hover {
      border: 1px solid @activeColor;
      border-left: 0;
      color: @baseColor;
    }
  }
}
.shouQiLeftStyle {
  transform: translate(-200px, 0);
  transition: 0.5s;
}
</style>
